<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PGK Training System: Register</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script language="javascript">
{literal}
var name=false;
var surname=false;
var faculty=false;
var group=false;
var login=false;
var password=false;





	$(document).ready(function(){
	
		$('#usernameLoading').hide(); // rotating gif picture
		$('#errorUser').hide();  //a message that tells if login available
		$('#availUser').hide();
		$('#action_delete').hide(); //small picture tick
		$('#action_check').hide();  // small error picture
	
	
	$('#login').blur(function(){   // checks login
	 	 $('#usernameLoading').show();
     	 $.post("ajax/ajax_check.php", {
        login: $('#login').val()}
		, function(response){
	  		$('#usernameLoading').hide();
        		if(response=='no'){$('#availUser').hide();$('#errorUser').show();login=false;}
				else{
					$('#errorUser').hide();
					$('#availUser').show();
					login=true;
				}
      		});
	  }); //end of check login
		
		
		$('#retype').blur(function(){ // checks if you correctly retyped your password
			if($('#retype').val()==$('#password').val()){
				$('#action_check').show();
				$('#action_delete').hide();
				password=true;
			}/*
			alert(name);
			alert(surname);
			alert(login);
			alert(password);
			alert(group);
			alert(faculty);*/
			else{
				$('#action_check').hide();
				$('#action_delete').show();
				password=false
			}
		}); // end of password check
		
		
		$('select').change(function(){ //selects faculty
		$("#groupBox").removeClass().addClass('messagebox').fadeIn(1000);
			$.post("ajax/ajax_register.php",{sel_val:$('select#fac_select').val()},function(data){
				$("select#group_select").remove();
				$("#group_div").css("height","20px");
				$(data).appendTo("#group_div").slideDown("slow");
			});
		});//end of selecting fac
		
		if($('#name').val()>0){name=true;}
		if($('#surname').val()>0){surname=true;}
		if($('#faculty').val()!=0){faculty=true;}
		if($('#group').val()!=0){group=true;}
		
		
		
		
		if(name && surname && password && login && faculty && group){
		//	$('input:submit').attr("disabled","");
		}
		else{
			//$('input:submit').attr("disabled","disabled");
		}
		
	});
	
	
		
	
	
{/literal}	
</script>

<style type="text/css">
	{literal}
.messagebox{
	position:relative;
	width:100px;
	margin-left:30px;
	border:1px solid #c93;
	background:#ffc;
	padding:3px;
}
.messageboxok, #availUser{
	position:absolute;
	width:auto;
	margin-left:30px;
	border:1px solid #349534;
	background:#C9FFCA;
	padding:3px;
	font-weight:bold;
	color:#008000;
	
}
.messageboxerror, #errorUser{
	position:absolute;
	width:auto;
	margin-left:30px;
	border:1px solid #CC0000;
	background:#F7CBCA;
	padding:3px;
	font-weight:bold;
	color:#CC0000;
}
.displayNone{ display:none;}
#group_div{ width:0px; height:0px;}
	{/literal}
</style>
</head>
<body>
<div id="topPan"><a href="index.php"><img src="images/logo.gif" title="Green Solutions" alt="Green Solutions" width="204" height="57" border="0"/></a>

</div>
<div style="height:50px;"></div>
<center>
	<div id="rightPan">
	<div id="rightPanBorder" style="left:0px">
	<div id="rightbodyPan" >
	&nbsp;<br>
	<h2>Registration Form</h2>
    <form method="post" action="index.php" id="reg_form">
    	<table id="login_table">
        	<tr>
            	<td  class="leftPartTable">Name</td>
                <td><input type="text" id="name" name="name" style="width:100%" ></td>
                <td><input type="hidden" name="signup" value="1"></td>
            </tr>
            <tr>
            	<td class="leftPartTable">Surname</td>
                <td><input type="text" id="surname" name="surname" style="width:100%"></td>
                <td></td>
            </tr>
            
            <tr class="selecting">
            	<td class="leftPartTable">Faculty</td>
                <td><select  name="faculty"  style="width:100%" id="fac_select" >
					{html_options values=$fac_ids output=$fac_names selected="0" }
				</select>
                <div id="group_div" >
                	
                </div>
                </td>
                <td></td>
            </tr>
            
            <tr>
            	<td class="leftPartTable">Email</td>
                <td><input type="text" id="email" name="email" style="width:100%"></td>
                <td></td>
            </tr>
     
            <tr>
            	<td class="leftPartTable">Login</td>
                <td><input type="text" name="login" id="login" style="width:100%" ></td>
                <td><div id="usernameLoading" class="messagebox"><img src="images/indicator.gif"></div>
				<div id="errorUser">Not Avialable</div>
				<div id="availUser">Available</div>
                </td>
                
            </tr>
            <tr>
            	<td class="leftPartTable">Password</td>
                <td><input type="password" id="password"name="password" style="width:100%"></td>
                <td></td>
            </tr>
            <tr>
            	<td class="leftPartTable">Re-type</td>
                <td><input type="password" name="retype" id="retype" style="width:100%"></td>
                <td><img id="action_check"  src="images/action_check.ico"><img id="action_delete"  src="images/action_delete.ico"></td>
            </tr>
        	<tr>
            	<td colspan="3">
				<div id="leftPango"><p class="textposition"><a href="index.php?option=users&task=login">Back to login</a></p>
	   				<input type="submit" class="gobutton" name="submit" id="submit" value="Go" />
	   			</div>
	     		</td>
            </tr>            
        </table>
    </form>
    </div>
	</div></div>
</center>

</body>
</html>
